<div id="hotelPolicyDiv">
    <h4>酒店政策</h4>
    <!--入住及退房时间-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>入住及退房时间</h5>
            <div class="form-group">
                <label for="hotelCheckInTime">入住时间</label>
                <form class="form-inline">
                    <label>
                        <input type="time" class="form-control mb-2 mr-sm-2" id="hotelCheckInTime"
                               v-model:value="policy.check.checkInTime"/>
                    </label>之后
                </form>
            </div>
            <div class="form-group">
                <label for="checkOutTime">退房时间</label>
                <form class="form-inline">
                    <label>
                        <input type="time" class="form-control mb-2 mr-sm-2" id="checkOutTime"
                               v-model:value="policy.check.checkOutTime"/>
                    </label>之前
                </form>
            </div>
        </div>
    </div>
    <!--入住-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>入住</h5>
            <div class="form-group">
                <label for="hotelCheckType">入住方式</label>
                <input type="text" class="form-control" id="hotelCheckType" placeholder="请填写入住方式"
                       v-model:value="policy.checkType.checkTypeName">
            </div>
            <div class="form-group">
                <label for="hotelAttention">入住提示</label>
                <textarea rows="3" class="form-control" id="hotelAttention" placeholder="请填写入住提示"
                          v-model:value="policy.attention">
                </textarea>
            </div>
        </div>
    </div>
    <!--儿童-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>儿童</h5>
            <div class="form-group">
                <label>是否允许客人携带儿童入住</label>
                <div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="allowChild1"
                               value="0" v-model:value="policy.allowChild">
                        <label class="form-check-label" for="allowChild1">允许</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="allowChild2"
                               value="1" v-model:value="policy.allowChild">
                        <label class="form-check-label" for="allowChild2">不允许</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--是否允许加床-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>加床</h5>
            <div class="form-group">
                <label>
                    是否允许加床
                </label>
                <form class="form-inline">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="allowAddBed" id="allowAddBed1"
                               value="0" v-model="policy.addBed.allowAddBed">
                        <label class="form-check-label" for="allowAddBed1">允许</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="allowAddBed" id="allowAddBed2"
                               value="1" v-model="policy.addBed.allowAddBed">
                        <label class="form-check-label" for="allowAddBed2">不允许</label>
                    </div>
                </form>
            </div>
            <div v-show="policy.addBed.allowAddBed==0">
                <div class="form-group">
                    <label>
                        允许加床数量
                    </label>
                    <form class="form-inline">
                        <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="policy.addBed.bedNum"/>张
                    </form>
                </div>
                <div class="form-group">
                    <label>
                        每加一张床的价格
                    </label>
                    <form class="form-inline">
                        <input type="number" step="0.1" class="form-control mb-2 mr-sm-2"
                               v-model:value="policy.addBed.bedCost"/>元/张
                    </form>
                </div>
                <div class="form-group">
                    <label>
                        加床是否包含早餐
                    </label>
                    <form class="form-inline">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="breakfast" id="breakfast1"
                                   value="0" v-model:value="policy.addBed.breakfast">
                            <label class="form-check-label" for="breakfast1">包含</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="breakfast" id="breakfast2"
                                   value="1" v-model:value="policy.addBed.breakfast">
                            <label class="form-check-label" for="breakfast2">不包含</label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--早餐-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>早餐</h5>
            <div class="form-group">
                <label>
                    是否提供早餐
                </label>
                <form class="form-inline">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="offerBreakfast" id="offerBreakfast1"
                               value="0" v-model="policy.breakfast.offerBreakfast">
                        <label class="form-check-label" for="offerBreakfast1">提供</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="offerBreakfast" id="offerBreakfast2"
                               value="1" v-model="policy.breakfast.offerBreakfast">
                        <label class="form-check-label" for="offerBreakfast2">不提供</label>
                    </div>
                </form>
            </div>
            <div v-show="policy.breakfast.offerBreakfast==0">
                <div class="form-group" v-for="(item,index) in policy.breakfast.breakfastTypes">
                    <label for="hotelBreakfastType">早餐类型</label>
                    <input type="text" class="form-control" id="hotelBreakfastType" placeholder="请填写早餐类型"
                           v-model:value="item.breakfastType">
                </div>
                <button onclick="addBreakfastType()">添加早餐类型</button>
                <button onclick="deleteBreakfastType()">删除早餐类型</button>
                <div class="form-group" v-for="(item,index) in policy.breakfast.menuTypes">
                    <label for="hotelMenuType">菜单类型</label>
                    <input type="text" class="form-control" id="hotelMenuType" placeholder="请填写菜单类型"
                           v-model:value="item.menuType">
                </div>
                <button onclick="addMenuType()">添加菜单类型</button>
                <button onclick="deleteMenuType()">删除菜单类型</button>
                <div class="form-group">
                    <label>
                        早餐价格
                    </label>
                    <form class="form-inline">
                        <input type="number" step="0.1" class="form-control mb-2 mr-sm-2"
                               v-model:value="policy.breakfast.breakfastCost"/>元/位
                    </form>
                </div>
                <div class="form-group">
                    <label for="hotelOperateTime">营业时间</label>
                    <form class="form-inline">
                        <input type="time" class="form-control mb-2 mr-sm-2" id="hotelOperateTime"
                               v-model:value="openTime"/>
                        至
                        <input type="time" class="form-control mb-2 mr-sm-2" v-model:value="endTime"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--停车-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>停车</h5>
            <div class="form-group">
                <label>
                    是否允许停车
                </label>
                <form class="form-inline">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="allow" id="allow1"
                               value="0" v-model:value="policy.parking.allow">
                        <label class="form-check-label" for="allow1">允许</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="allow" id="allow2"
                               value="1" v-model:value="policy.parking.allow">
                        <label class="form-check-label" for="allow2">不允许</label>
                    </div>
                </form>
            </div>
            <div v-show="policy.parking.allow==0">
                <div class="form-group">
                    <label for="hotelParkingLocation">停车场地址</label>
                    <input type="text" class="form-control" id="hotelParkingLocation" placeholder="请填写停车场地址"
                           v-model:value="policy.parking.location">
                </div>
            </div>
        </div>
    </div>
    <!--宠物-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>宠物</h5>
            <div class="form-group">
                <label>
                    是否允许携带宠物
                </label>
                <form class="form-inline">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="pet" id="pet1"
                               value="0" v-model:value="policy.pet">
                        <label class="form-check-label" for="pet1">允许</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="pet" id="pet2"
                               value="1" v-model:value="policy.pet">
                        <label class="form-check-label" for="pet2">不允许</label>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--年龄限制-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>年龄限制</h5>
            <div class="form-group">
                <label>
                    请输入年龄限制
                </label>
                <form class="form-inline">
                    <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="policy.limitAge"/>岁以上
                </form>
            </div>
        </div>
    </div>
    <!--按钮组-->
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <button type="button" class="btn-primary" onclick="saveHotelPolicy()">保存</button>
        </div>
    </div>
</div>
<script>
    var hotelPolicyVue = new Vue({
        el: "#hotelPolicyDiv",
        data: {
            policy: {
                user: {
                    userId: $("#userId").val()
                },
                check: {
                    checkInTime: "",
                    checkOutTime: ""
                },
                checkType: {
                    checkTypeName: ""
                },
                attention: "",
                allowChild: 0,
                addBed: {
                    allowAddBed: 0,
                    bedNum: "",
                    bedCost: "",
                    breakfast: 0,
                },
                breakfast: {
                    offerBreakfast: 0,
                    breakfastTypes: [
                        {
                            breakfastType: ""
                        }
                    ],
                    menuTypes: [
                        {
                            menuType: ""
                        }
                    ],
                    breakfastCost: "",
                    operateTime: ""
                },
                parking: {
                    allow: 0,
                    location: ""
                },
                pet: 0,
                limitAge: ""
            },
            openTime: "",
            endTime: "",
        },
        methods: {
            initPage: function () {
                var self = this;
                $.ajax({
                    url: "/api/policy/" + $("#userId").val(),
                    type: "get",
                    success: function (rs) {
                        self.policy = rs;
                        console.log(rs);
                        var strings = self.policy.breakfast.operateTime.split("--");
                        self.openTime = strings[0];
                        self.endTime = strings[1];
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            addBreakfastType: function () {
                var self = this;
                self.policy.breakfast.breakfastTypes.push({
                    breakfastType: ""
                })
            },
            deleteBreakfastType: function () {
                var self = this;
                if (self.policy.breakfast.breakfastTypes.length > 1) {
                    self.policy.breakfast.breakfastTypes.splice(-1);
                }
            },
            addMenuType: function () {
                var self = this;
                self.policy.breakfast.menuTypes.push({
                    menuType: ""
                })
            },
            deleteMenuType: function () {
                var self = this;
                if (self.policy.breakfast.menuTypes.length > 1) {
                    self.policy.breakfast.menuTypes.splice(-1);
                }
            },
            saveHotelPolicy: function () {
                var self = this;
                self.policy.breakfast.operateTime = self.openTime + "--" + self.endTime;
                $.ajax({
                    url: "/api/policy",
                    type: "put",
                    contentType: "application/json",
                    data: JSON.stringify(self.policy),
                    success: function (rs) {
                        if (rs.status === 200) {
                            layer.alert("修改成功", {icon: 0});
                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            }
        },
        created: function () {
            window.addBreakfastType = this.addBreakfastType;
            window.deleteBreakfastType = this.deleteBreakfastType;
            window.addMenuType = this.addMenuType;
            window.deleteMenuType = this.deleteMenuType;
            window.saveHotelPolicy = this.saveHotelPolicy;
        },
        mounted: function () {
            this.initPage();
        }
    })
</script>